<template>
    <div class="ebook-reader">
        <div id="ebook" ref="ebook">
          <!-- <ebook-header></ebook-header> -->
          <ebook-title></ebook-title>
          <ebook-reader></ebook-reader>
          <ebook-menu></ebook-menu>
          <ebook-bookmark></ebook-bookmark>
          <ebook-footer></ebook-footer>
        </div>
    </div>
</template>
<script>
import EbookReader from '@/components/ebook/Ebook'
import EbookTitle from '@/components/ebook/EbookTitle'
import EbookMenu from '@/components/ebook/EbookMenu'
import EbookBookmark from '@/components/ebook/EbookBookmark'
// import EbookHeader from '@/components/ebook/EbookHeader'
import EbookFooter from '@/components/ebook/EbookFooter'
import { getReadTime, saveReadTime } from '../../utils/localStorage';
import { ebookMixin } from '../../utils/mixin';
export default {
    mixins:[ebookMixin],
    components:{
      EbookReader,
      EbookTitle,
      EbookMenu,
      EbookBookmark,
      // EbookHeader,
      EbookFooter
    },
    methods:{
      // 开启定时任务
      startLoopReadTime(){
        let readTime = getReadTime(this.fileName)
        if(!readTime){
          readTime = 0
        }
        this.task = setInterval(() => {
          readTime++ 

          if(readTime % 30 === 0 ){
            saveReadTime(this.fileName,readTime)
          }
        }, 1000);
      },
      move(v){
        this.$refs.ebook.style.top = v+'px'
      },
      restore(){
        this.$refs.ebook.style.top = 0
        this.$refs.ebook.style.transition = 'all .2s linear'
        setTimeout(()=>{
        this.$refs.ebook.style.transition = ''
        },200)
      }
    },
    watch:{
      offsetY(v){
        if(!this.menuVisible && this.bookAvailable){
          if(v>0){
            this.move(v)
          }else if(v === 0){
            this.restore()
          }
        }
      }
    },
    mounted(){
      this.startLoopReadTime()
    },
    beforeDestroy(){
      if(this.task){
        clearInterval(this.task)
      }
    }
}
</script>
<style lang="scss" scoped>
#ebook{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
